<template>
  <m-layout>
    <mt-header slot="header" title="训练大纲">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :borderTop="false">
        <m-divider>
          <div class="big class-title">课程：{{periodList.length>0 ? periodList[0].subjectName : ''}}</div>
        </m-divider>
        <e-heading>教学目标</e-heading>
        <div class="info">
          <text-omit :text="details ? details.objective : '暂无内容'" max="100" />
        </div>
      </m-section>
      <m-section>
        <e-heading>课时（共{{periodList.length}}课时）</e-heading>
        <mt-cell v-for="(item, index) in periodList" :key="index"
          :title="`课时${index+1}：${item.topicName}`"
          :label="item.time"
          is-link
          :to="`/program/plan?id=${item.id}&title=课时${index+1}：${item.topicName}`"
          :value="item.teacherName" />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
import TextOmit from '@/views/components/TextOmit'

export default {
  components: {
    TextOmit
  },
  computed: {
    ...mapState({
      details: state => state.program.details,
      periodList: state => state.program.periodList
    })
  },
  data () {
    return {
      value: ''
    }
  },
  mounted () {
    console.log(this.$route.query)
    this.$store.dispatch('program/details', {classId: this.$route.query.id})
    this.$store.dispatch('program/periodList', {classId: this.$route.query.id})
  }
}
</script>

<style lang="scss" scoped>
  .class-title{
    font-weight: bold;
    padding: 0 .24rem;
    line-height: .9rem;
  }
  .info{
    padding: 0 .24rem .24rem
  }
</style>
